<template>
    <!-- 顶部tab栏 -->
    <div class="screen-nav">
        <h1>
            <router-link :to="defaultLink()" class="title">{{ title }}</router-link>
        </h1>
        <ul class="nav">
            <!-- <li v-for="route in routes"><router-link :to="route.path">{{ route.meta.title }}</router-link></li> -->
            <li v-for="(route, index) in routes" :key="index">
                <router-link :to="routesLink(route.link)">{{ route.title }}</router-link>
            </li>
        </ul>
    </div>
</template>
<script>
import { HomeDb } from '@/api'

export default {
    name: 'ScreenNav',
    props: {
        navType: {
            type: String,
            required: false,
        },
    },
    data() {
        return {
            routes: [
                {
                    link: "/zhfx",
                    title: '综合运行分析'
                },
                {
                    link: "/zhzf",
                    title: '综合执法分析'
                },
                // {
                //     link: "/analysis",
                //     title: '智能化应用分析'
                // },
                {
                    link: "/znfiyp",
                    title: '智能分析研判'
                },
                {
                    link: "/zfzt",
                    title: '综合执法专题'
                },
                // {
                //     link: "/zhsr",
                //     title: '市容环卫专题'
                // },
                // {
                //     link: "/zfsz",
                //     title: '市政监管专题'
                // },
                // {
                //     link: "/citizenServices",
                //     title: '市民服务专题'
                // },
                // {
                //     link: "/dyjxh",
                //     title: '队伍精细化管理'
                // },
                // {
                //     link: "/zhzfyxzs",
                //     title: '综合执法运行指数'
                // },
                // {
                //     link: "/fxjkyj",
                //     title: '风险监控预警'
                // },
            ],
            title: '长子县综合监督评价分析大屏',
            prefixRoute: null
        }
    },
    computed: {
        defaultLink() {
            return () => {
                if (this.prefixRoute) {
                    return this.prefixRoute + '/zhyx'
                } else {
                    return '/zhyx'
                }
            }
        },
        routesLink() {
            return (link) => {
                if (this.prefixRoute) {
                    return this.prefixRoute + link
                } else {
                    return link
                }
            }

        }
    },
    mounted() {
        this.getRoutes();
    },
    methods: {
        getRoutes() {

            HomeDb.getOaMenuConfig().then(res => {
                if (res.code == 200) {
                    let data = res.data;
                 
                }

            })
        }
    },
}
</script>

<style lang="less" scoped>
.screen-nav {
    background: url(../../assets/images/zhangzi/home/screen-nav.png) no-repeat 0 0;
    background-size: 100% 100%;
    width: 100%;
    height: 5rem;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0.11rem;
    z-index: 1987;
    display: flex;
    align-items: center;
}

.title {
    margin: 0 2rem;
    font-size: 3rem;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #F0FCFF;
    line-height: 3.6rem;
}



.nav {
    display: flex;
    margin-left: 13rem;

    li {
        margin: 0 2rem;
    }


    a {
        color: rgba(255, 255, 255, .5);
        font-size: 1.3rem;
        position: relative;

        &:after {
            content: '';
            display: block;
            width: 0;
            height: 0.4rem;
            background: #009EFF;
            border-radius: 0.2rem;
            position: absolute;
            bottom: -1.3rem;
            left: 50%;
            margin-left: -1.8rem;
            transition: all .5s ease;
        }
    }

    .router-link-active {
        color: #009EFF ;
        font-weight: bold;

        &::after {
            width: 3.6rem;
        }
    }
}
</style>

